<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>DeathGhost-我的店铺</title>
    <meta name="keywords" content="DeathGhost,DeathGhost.cn,web前端设,移动WebApp开发"/>
    <meta name="description" content="DeathGhost.cn::H5 WEB前端设计开发!"/>
    <meta name="author" content="DeathGhost"/>
    <link href="/style/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="/js/public.js"></script>
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/jqpublic.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/cart.js"></script>
    <script type="text/javascript" src="/js/jquery.easyui.min.js"></script>
    <script>
        function init() {
            //你的插件程序，该代码可以放在其他js文件上
            $(function () {
                $('.title-list li').click(function () {
                    var liindex = $('.title-list li').index(this);
                    $(this).addClass('on').siblings().removeClass('on');
                    $('.menutab-wrap div.menutab').eq(liindex).fadeIn(150).siblings('div.menutab').hide();
                    var liWidth = $('.title-list li').width();
                    $('.shopcontent .title-list p').stop(false, true).animate({'left': liindex * liWidth + 'px'}, 300);
                });

                $('.menutab-wrap .menutab li').hover(function () {
                    $(this).css("border-color", "#ff6600");
                    $(this).find('p > a').css('color', '#ff6600');
                }, function () {
                    $(this).css("border-color", "#fafafa");
                    $(this).find('p > a').css('color', '#666666');
                });
            });
        }

        var mt = 0;
        window.onload = function () {
            var Topcart = document.getElementById("Topcart");
            var mt = Topcart.offsetTop;
            window.onscroll = function () {
                var t = document.documentElement.scrollTop || document.body.scrollTop;
                if (t > mt) {
                    Topcart.style.position = "fixed";
                    Topcart.style.margin = "";
                    Topcart.style.top = "200px";
                    Topcart.style.right = "191px";
                    Topcart.style.boxShadow = "0px 0px 20px 5px #cccccc";
                    Topcart.style.top = "0";
                    Topcart.style.border = "1px #636363 solid";
                } else {
                    Topcart.style.position = "static";
                    Topcart.style.boxShadow = "none";
                    Topcart.style.border = "";
                }
            }
        }
        /* function collect(id) {
          location.href="/dish/collectShop/"+id;
         }

         function noCollect(id) {
          location.href="/dish/noCollectShop/"+id;
         }*/

    </script>
    <!--
    Author: DeathGhost
    Author URI: http://www.deathghost.cn
    -->
</head>
<body>
<header class="header">


</header>
<script>

    $('.header').load('/header.html', function (responseTxt, statusTxt, xhr) {
        console.log('responseTxt,statusTxt,xhr')

    })
</script>
<div id="app">
    <!--Start content-->
    <section class="Shop-index">
        <article>
            <div class="shopinfor">
                <div class="title">
                    <img :src="shop.picture" class="shop-ico">
                    <span>{{shop.name}}</span>
                    <span>
     <img src="/images/star-on.png">
     <img src="/images/star-on.png">
     <img src="/images/star-on.png">
     <img src="/images/star-on.png">
     <img src="/images/star-off.png">
    </span>
                    <span>4.8</span>
                </div>
                <div class="imginfor">
                    <div class="shopimg">
                        <img :src="shop.picture" id="showimg">
                        <ul class="smallpic">
                            <li><img :src="shop.picture" onmouseover="show(this)" onmouseout="hide()"></li>
                        </ul>
                    </div>
                    <div class="shoptext">
                        <p><span>地址：</span>{{shop.address}}</p>
                        <p><span>电话：</span>{{shop.phone}}</p>
                        <p><span>特色菜品：</span>todo:此功能二期再做</p>
                        <p><span>店铺简介：</span>{{shop.description}}</p>
                        <p><span>营业时间：</span>{{shop.businessHours}}</p>
                        <!--<div class="Button">
                         <a href="#ydwm"><span class="DCbutton">查看菜谱点菜</span></a>
                        </div>-->
                        <div class="otherinfor">
                            <a class="icoa" v-show="!show1" @click="collect()"><img
                                    src="/images/star-off.png" >收藏店铺（1293）</a>
                            <a  class="icoa" v-show="!show2" @click="noCollect()"><img
                                    src="/images/collect.png" >取消收藏（1293）</a>
                        </div>

                    </div>


                </div>
            </div>
            <div class="shopcontent">
                <div class="title2 cf">
                    <ul class="title-list fr cf ">
                        <li class="on" @click="firstPage1()">菜谱</li>
                        <li @click="firstPage()">累计评论（{{page1.total}}）</li>
                        <li>商家详情</li>
                        <!--<li>店铺留言</li>-->
                        <p><b></b></p>
                    </ul>
                </div>
                <div class="menutab-wrap">
                    <a name="ydwm">
                        <!--case1-->
                        <div class="menutab show">
                            <ul class="products">
                                <li v-for="dish in page.records">
                                    <a :href="'/dish/details/'+dish.id" target="_blank" :title="dish.dishName">
                                        <img :src="'http://192.168.6.186:8081/'+dish.picture" class="foodsimgsize">
                                    </a>
                                    <a href="" class="item">
                                        <div>
                                            <p>菜品名：{{dish.dishName}}</p>
                                            <p>价格：￥{{dish.price}}</p>
                                            <!--<div><p class="AButton"><button>加入购物车</button></p></div>-->
                                        </div>
                                    </a>
                                </li>
                                <div class="TurnPage" id="t1">
                                    <a href="javascript:">
                                        <span v-if="page.current != 1" class="Prev"
                                              @click="firstPage()"><i></i>首页</span>
                                    </a>
                                    <a v-if="page.current != 1" href="javascript:"><span class="PNumber"
                                                                                         @click="lastPage()">上一页</span></a>
                                    <a v-for="p in page.pages" href="javascript:;">
                                        <span v-if="p == page.current" class="PNumber"><font
                                                color="#dc143c">{{p}}</font></span>
                                        <span v-if="p != page.current" class="PNumber" @click="goPage(p)">{{p}}</span>
                                    </a>
                                    <a v-if="page.current != page.pages && page.total != 0" href="javascript:"><span
                                            class="PNumber" @click="nextPage()">下一页</span></a>
                                    <a href="javascript:">
                                        <span v-if="page.current != page.pages && page.total != 0" class="Next"
                                              @click="endPage()">尾页<i></i></span>
                                    </a>
                                </div>
                            </ul>
                        </div>
                    </a>
                    <!--case2-->
                    <div class="menutab">
                        <div class="shopcomment">
                            <div class="username">
                                <p>菜品名</p>
                            </div>
                            <div class="C-content">
                                <div class="username">
                                    <p>评论内容</p>
                                </div>
                                <i></i>
                            </div>
                            <div class="username">
                                用户姓名
                            </div>
                        </div>
                        <div class="shopcomment" v-for="review in page1.records">
                            <div class="Spname">
                                <a :href="'/dish/details/'+review.dishId" target="_blank" :title="review.dishName">{{review.dishName}}</a>
                            </div>
                            <div class="C-content">
                                <p>{{review.comment}}</p>
                                <i>{{review.orderTime}}</i>
                            </div>
                            <div class="username">
                                {{review.userName}}
                            </div>
                        </div>
                        <div class="TurnPage" id="t2">
                            <a href="javascript:">
                                <span v-if="page1.current != 1" class="Prev" @click="firstPage1()"><i></i>首页</span>
                            </a>
                            <a v-if="page1.current != 1" href="javascript:"><span class="PNumber" @click="lastPage1()">上一页</span></a>
                            <a v-for="p1 in page1.pages" href="javascript:;">
                                <span v-if="p1 == page1.current" class="PNumber"><font
                                        color="#dc143c">{{p1}}</font></span>
                                <span v-if="p1 != page1.current" class="PNumber" @click="goPage1(p1)">{{p1}}</span>
                            </a>
                            <a v-if="page1.current != page1.pages && page1.total != 0" href="javascript:"><span
                                    class="PNumber" @click="nextPage1()">下一页</span></a>
                            <a href="javascript:">
                                <span v-if="page1.current != page1.pages && page1.total != 0" class="Next"
                                      @click="endPage1()">尾页<i></i></span>
                            </a>
                        </div>
                    </div>
                    <!--case4-->
                    <div class="menutab">
                        <div class="shopdetails">
                            <div class="shopmaparea">
                                <img src="/upload/testimg.jpg"><!--此处占位图调用动态地图后将其删除即可-->
                            </div>
                            <div class="shopdetailsT">
                                <p><span>店铺：</span>{{shop.name}}</p>
                                <p><span>地址：</span>{{shop.address}}</p>
                                <p><span>电话：</span>{{shop.phone}}</p>
                                <p><span>店铺介绍：</span>{{shop.description}}</p>
                            </div>
                        </div>
                    </div>
                    <!--case5-->
                    <div class="menutab">
                        <span class="Ask"><i>DeathGhost</i>:这里是测试问答？</span>
                        <span class="Answer"><i>管理员回复</i>：这里是测试回答！</span>

                        <div class="TurnPage">
                            <a href="#">
                                <span class="Prev"><i></i>首页</span>
                            </a>
                            <a href="#"><span class="PNumber">1</span></a>
                            <a href="#"><span class="PNumber">2</span></a>
                            <a href="#">
                                <span class="Next">最后一页<i></i></span>
                            </a>
                        </div>

                        <form class="A-Message" action="#">
                            <p><i>姓名：</i><input name="usr_name" type="text" autofocus placeholder="张三" required></p>
                            <p><i>手机：</i><input name="" type="text" placeholder="15825518***" pattern="[0-9]{11}"
                                                required></p>
                            <p><i>邮件：</i><input type="email" name="email" autocomplete="off"
                                                placeholder="admin@admin.com" required/></p>
                            <p><i>问题补充：</i><textarea name="" cols="" rows="" required
                                                     placeholder="详细说明您的问题..."></textarea></p>
                            <p><input type="submit" class="Abutt"/></p>
                        </form>
                    </div>
                </div>
            </div>
        </article>
        <!--<aside>
         <div class="cart" id="Topcart">
          <span class="Ctitle Block FontW Font14"><a th:href="cart.html" target="_blank">我的购物车</a></span>
          <table id="cartcontent" fitColumns="true">
           <thead>
           <tr>
            <th width="33%" align="center" field="name">商品</th>
            <th width="33%" align="center" field="quantity">数量</th>
            <th width="33%" align="center" field="price">价格</th>
           </tr>
           </thead>
          </table>
          <p class="Ptc"><span class="Cbutton"><a  target="进入购物车">进入购物车</a></span><span class="total">共计金额: ￥0</span></p>
         </div>

         <div class="Nearshop">
          <span class="Nstitle">附近其他店铺</span>
          <ul>
           <li>
            <img src="/upload/cc.jpg">
            <p>
             <span class="shopname" title="动态调用完整标题"><a  target="_blank" title="肯德基">肯德基</a></span>
             <span class="Discolor">距离：1.2KM</span>
             <span title="完整地址title">地址：西安市雁塔区2000号...</span>
            </p>
           </li>
          </ul>
         </div>

         <div class="History">
          <span class="Htitle">浏览历史</span>
          <ul>
           <li>
            <a  target="_blank" title="清真川菜馆"><img src="/upload/cc.jpg"></a>
            <p>
             <span class="shopname" title="动态调用完整标题"><a  target="_blank" title="正宗陕北小吃城">正宗陕北小吃城</a></span>
             <span>西安市莲湖区土门十西安市莲湖区土门十字西安市莲湖区土门十字.</span>
            </p>
           </li>
           <span>[ <a>清空历史记录</a> ]</span>
          </ul>
         </div>
        </aside>-->

    </section>
    <!--End content-->

    <footer>
        <section class="Otherlink">
            <aside>
                <div class="ewm-left">
                    <p>手机扫描二维码：</p>
                    <img src="/images/Android_ico_d.gif">
                    <img src="/images/iphone_ico_d.gif">
                </div>
                <div class="tips">
                    <p>客服热线</p>
                    <p><i>1830927**73</i></p>
                    <p>配送时间</p>
                    <p>
                        <time>09：00</time>
                        ~
                        <time>22:00</time>
                    </p>
                    <p>网站公告</p>
                </div>
            </aside>
            <section>
                <div>
                    <span><i class="i1"></i>配送支付</span>
                    <ul>
                        <li><a th:href="article_read.html" target="_blank" title="标题">支付方式</a></li>
                        <li><a th:href="article_read.html" target="_blank" title="标题">配送方式</a></li>
                        <li><a th:href="article_read.html" target="_blank" title="标题">配送效率</a></li>
                        <li><a th:href="article_read.html" target="_blank" title="标题">服务费用</a></li>
                    </ul>
                </div>
                <div>
                    <span><i class="i2"></i>关于我们</span>
                    <ul>
                        <li><a th:href="article_read.html" target="_blank" title="标题">招贤纳士</a></li>
                        <li><a th:href="article_read.html" target="_blank" title="标题">网站介绍</a></li>
                        <li><a th:href="article_read.html" target="_blank" title="标题">配送效率</a></li>
                        <li><a th:href="article_read.html" target="_blank" title="标题">商家加盟</a></li>
                    </ul>
                </div>
                <div>
                    <span><i class="i3"></i>帮助中心</span>
                    <ul>
                        <li><a th:href="article_read.html" target="_blank" title="标题">服务内容</a></li>
                        <li><a th:href="article_read.html" target="_blank" title="标题">服务介绍</a></li>
                        <li><a th:href="article_read.html" target="_blank" title="标题">常见问题</a></li>
                        <li><a th:href="article_read.html" target="_blank" title="标题">网站地图</a></li>
                    </ul>
                </div>
            </section>
        </section>
        <div class="copyright">© 版权所有 2016 DeathGhost 技术支持：<a href="http://www.deathghost.cn" title="DeathGhost">DeathGhost</a>
        </div>
    </footer>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                //商铺信息
                shop: null,
                //菜谱分页数据
                page: [],
                //评论分页数据
                page1: [],
                current: 0,
                current1: 0,
                //收藏店铺
                show1: false,
                //取消店铺
                show2: true
            }
        },
        methods: {
            //收藏店铺
            collect() {
                axios.post("/dish/collectShop/" + this.shop.id).then(r => {
                    if (r.data.code === 200) {
                        this.show1 = true;
                        this.show2 = false;
                    }
                });
            },
            //取消收藏店铺
            noCollect() {
                axios.post("/dish/noCollectShop/" + this.shop.id).then(r => {
                    this.show1 = false;
                    this.show2 = true;
                });
            },
            //跳转首页
            firstPage() {
                this.current = 1;
                this.getDishList();
            },
            //上一页
            lastPage() {
                this.current = this.current - 1;
                this.getDishList();
            },
            goPage(p) {
                this.current = p;
                this.getDishList();
            },
            nextPage() {
                this.current = this.current + 1;
                this.getDishList();
            },
            //尾页
            endPage() {
                this.current = this.page.pages;
                this.getDishList();
            },
            getDishList() {
                axios.get("/dish/list?current=" + this.current + "&current1=1").then(r => {
                    if (r.data.code === 200) {
                        this.page = r.data.data[1];
                    }
                })
            },
            //跳转首页
            firstPage1() {
                this.current1 = 1;
                this.getReviewList();
            },
            //上一页
            lastPage1() {
                this.current1 = this.current1 - 1;
                this.getReviewList();
            },
            goPage1(p1) {
                this.current1 = p1;
                this.getReviewList();
            },
            nextPage1() {
                this.current1 = this.current1 + 1;
                this.getReviewList();
            },
            //尾页
            endPage1() {
                this.current1 = this.page1.pages;
                this.getReviewList();
            },
            getReviewList() {
                axios.get("/dish/list?current=1&current1=" + this.current1).then(r => {
                    if (r.data.code === 200) {
                        this.page1 = r.data.data[2];
                    }
                })
            },
        },
        mounted: function () {
            axios.get("/dish/list?current=1&current1=1").then(r => {
                if (r.data.code === 200) {
                    this.shop = r.data.data[0];
                    this.page = r.data.data[1];
                    this.page1 = r.data.data[2];
                    console.log(this.shop);
                    this.$nextTick(() => {
                        init();
                    });
                    axios.post("/dish/shop/" + r.data.data[0].id).then(r => {
                        if (r.data.code === 200) {
                            //大于1 成功 收藏  小于1  没有

                            this.show1 = true;
                            console.log(this.show1)
                            this.show2 = false;
                        }else if(r.data.code===501){
                            this.show1 = false;
                            console.log(this.show1)
                            this.show2 = true;
                        }else if(r.data.code===502){
                            this.show1 = true;
                            this.show2 = true;
                        }
                    });
                }
            });

        }
    });
</script>
</html>

